import { useState } from "react";

// 函数组件，没有this指向的问题
const FuncCompoent = (props) => {
  // useState(),是函数组件专业的Hooks函数，用来声明一个状态
  const [count, setCount] = useState(0)

  const handlerCount = (value, event) => {
    console.log('handlerCount', value, event);
    // 修改状态：
    setCount(value)
  }
  // props可以直接使用
  console.log(props); //{count: 1, title: true}
  // props可以解构赋值：
  const { 'count': countProps, title } = props
  // 必须要有return，返回react元素
  return (
    <div>
      FuncCompoent 组件：count: {count}
      <br />
      <button onClick={handlerCount}>不传参数</button>
      <button onClick={(event) => {
        handlerCount(10, event)
      }}>传参数</button>

      <hr />
      <div>
        props's count: {props.count}
      </div>
      <div>
        countProps: {countProps}
      </div>
    </div>
  );
}

export default FuncCompoent